<template>
  <view class="modify-password">
    <view class="form-label">
      <image class="label-icon" src="/static/login/phone.png" />
      手机号
    </view>
    <view class="form-input">
      <input
        v-model="phoneNumber"
        class="input-box"
        type="number"
        maxlength="11"
        placeholder="请输入手机号"
      />
    </view>
    <view class="form-label">
      <image class="label-icon" src="/static/login/security.png" />
      验证码
    </view>
    <view class="form-input">
      <input
        v-model="captcha"
        class="input-box"
        type="number"
        maxlength="6"
        placeholder="请输入验证码"
      />
      <view class="captcha" @click="getSMSCaptcha">{{ captchaText }}</view>
    </view>
    <view class="form-label">
      <image class="label-icon" src="/static/login/lock.png" />
      输入密码
    </view>
    <view class="form-input">
      <input
        v-model="password"
        class="input-box"
        type="text"
        maxlength="11"
        placeholder="请输入新密码"
      />
    </view>
    <view class="form-label">
      <image class="label-icon" src="/static/login/lock.png" />
      确认密码
    </view>
    <view class="form-input">
      <input
        v-model="passwordC"
        class="input-box"
        type="text"
        maxlength="11"
        placeholder="请重新输入新密码"
      />
    </view>

    <button
      :disabled="disabled"
      class="btn-primary btn-submit"
      @click="handleSubmit"
    >
      完成
    </button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
import { useSMSCaptcha } from '@/hooks/useSMSCaptcha'
import { editPassword } from '@/api'

const password = ref('')
const passwordC = ref('')
const { captcha, captchaText, phoneNumber, getSMSCaptcha } = useSMSCaptcha()

const disabled = computed(
  () =>
    !phoneNumber.value || !captcha.value || !password.value || !passwordC.value
)

function handleSubmit() {
  if (password.value !== passwordC.value)
    return uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
  editPassword({
    phone: phoneNumber.value,
    code: captcha.value,
    password1: password.value,
    password2: passwordC.value
  }).then(() => {
    uni.showModal({
      title: '温馨提示',
      content: '密码已修改，请重新登录',
      confirmColor: '#377DFF',
      showCancel: false,
      success(res) {
        if (res.confirm) {
          useUserStore().logout()
          uni.reLaunch({
            url: '/pages/auth/index?action=login'
          })
        }
      }
    })
  })
}
</script>

<style scoped lang="scss">
.modify-password {
  display: flow-root;
  padding: 30rpx;
  .form-label {
    color: #333;
    font-size: 34rpx;
    display: flex;
    column-gap: 8rpx;
    align-items: center;
    .label-icon {
      width: 36rpx;
      height: 36rpx;
    }
  }
  .form-input {
    height: 88rpx;
    margin-top: 30rpx;
    margin-bottom: 50rpx;
    padding-left: 44rpx;
    padding-right: 44rpx;
    border-radius: 8rpx;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    .input-box {
      flex: 1;
    }
    .captcha {
      color: #4771f6;
      font-size: 28rpx;
      line-height: 26rpx;
      padding-left: 30rpx;
      border-left: 2rpx solid #4771f6;
    }
  }
  .btn-submit {
    margin-top: 70rpx;
    margin-bottom: 70rpx;
  }
}
</style>
<style>
page {
  background-color: #fff;
}
</style>
